import React, { Component } from "react";
import { Card, Input, Form, message, Select } from "antd";
import { connect } from "dva";
import { CHANNEL_VALUE } from "../../../channelType";

@connect(stores => ({
  planData: stores.planlist
}))
class WeChat extends Component {
  state = {
    loading: false,
    imageUrl: "",
    dingdingQunList: []
  };

  // componentDidMount() {
  //   const { dispatch } = this.props;

  //   // dispatch({
  //   //   type: "channelDictionaryModel/dingcompanygrouplist",
  //   //   payload: {},
  //   //   callback: data => {
  //   //     this.setState({ dingdingQunList: data });
  //   //   }
  //   // });
  // }

  componentWillReceiveProps(nextProps) {
    const { imageUrl: nextimageUrl } = nextProps;
    const { imageUrl } = this.props;
    if (imageUrl !== nextimageUrl) {
      this.setState({
        imageUrl: nextimageUrl
      });
    }
  }

  setUrl = e => {
    const { status, response } = e.file;
    if (status === "uploading") {
      this.setState({ loading: true });
    } else if (status === "done") {
      // 如果上传返回有错误，则提示错误信息，重置 loading 状态
      if (response && response.errCode === 1) {
        message.error(response.errMsg);
        this.setState({ loading: false });
      } else {
        this.setState({
          imageUrl: response && response.datas ? response.datas : "",
          loading: false
        });
      }
    }
  };

  normFile = e => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  render() {
    const {
      handleSubmit = () => {},
      chanleType,
      getChannelPlaceholder
    } = this.props;
    const { dingdingQunList } = this.state;
    // imageUrl,
    // const uploadButton = (
    //   <div className={imageUrl ? styles.picShowStyle : styles.picStyle}>
    //     {imageUrl ? (
    //       <img
    //         src={`/mgt/get/urlStream?url=${encodeURIComponent(imageUrl)}`}
    //         alt="avatar"
    //         style={{ width: 104, height: 104 }}
    //       />
    //     ) : (
    //       <div>
    //         <Icon
    //           type={this.state.loading ? "loading" : "plus"}
    //           className={styles.picIconStyle}
    //         />
    //         <div className={styles.picStyleText}>上传图标</div>
    //       </div>
    //     )}
    //   </div>
    // );

    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    };

    return (
      <Card title="渠道配置" style={{ marginTop: 16, marginBottom: 48 }}>
        <Form
          {...formItemLayout}
          onSubmit={handleSubmit}
          style={{ width: 800 }}
        >
          <Form.Item label=" 轻应用名称：">
            {getFieldDecorator("gongZhongNoName", {
              rules: [
                {
                  message: "请输入轻应用名称!"
                },
                {
                  required: true,
                  message: "请输入轻应用名称!"
                }
              ]
            })(
              <Input
                style={{ width: 466 }}
                maxLength={100}
                placeholder="请输入轻应用名称"
              />
            )}
          </Form.Item>
          {/* <Form.Item label=" 应用图标：">
            <div className={styles.picIcon}>
              {getFieldDecorator("icon", {
                valuePropName: "fileList",
                getValueFromEvent: this.normFile
              })(
                <Upload
                  name="file"
                  // action="/mgt/channel/pictureToUrl"
                  // action="/msg/simple/pictureToUrl"
                  action="mgt/pictureToUrl"
                  style={{ width: 104, height: 104 }}
                  listType="picture-card"
                  showUploadList={false}
                  onChange={this.setUrl}
                  accept="image/*"
                  beforeUpload={file => {
                    if (file.type.substring(0, 5) !== "image") {
                      message.error("仅支持上传图片");
                      return false;
                    }
                    if (file.size > 40 * 1024) {
                      message.error("请选择小于40KB的图片");
                      return false;
                    }
                    return true;
                  }}
                >
                  {uploadButton}
                </Upload>
              )}

              <div className={styles.picRightTxt}>
                <span className={styles.picRight}>
                  （只支持JPG、PNG，大小不超过40K）
                </span>
              </div>
            </div>
          </Form.Item> */}

          {chanleType !== CHANNEL_VALUE.DING_QUN_TALK && (
            <React.Fragment>
              <Form.Item label=" corp_id：">
                {getFieldDecorator("corpId", {
                  rules: [
                    {
                      message: "请输入corp_id!"
                    },
                    {
                      required: true,
                      message: "请输入corp_id!"
                    }
                  ]
                })(
                  <Input.Password
                    style={{ width: 466 }}
                    maxLength={128}
                    placeholder={getChannelPlaceholder(
                      chanleType,
                      "corp_id",
                      "请输入corp_id"
                    )}
                  />
                )}
              </Form.Item>
              <Form.Item label=" corp_secret：">
                {getFieldDecorator("corpSecret", {
                  rules: [
                    {
                      message: "请输入corp_secret!"
                    },
                    {
                      required: true,
                      message: "请输入corp_secret!"
                    }
                  ]
                })(
                  <Input.Password
                    maxLength={128}
                    style={{ width: 466 }}
                    placeholder={getChannelPlaceholder(
                      chanleType,
                      "corp_secret",
                      "请输入corp_secret"
                    )}
                  />
                )}
              </Form.Item>
            </React.Fragment>
          )}

          {chanleType === CHANNEL_VALUE.DING_TALK && (
            <Form.Item label=" agent_id：">
              {getFieldDecorator("agentId", {
                rules: [
                  {
                    message: "请输入agent_id!"
                  },
                  {
                    required: true,
                    message: "请输入正确的agent_id!"
                  },
                  { pattern: /^\d+$/, message: "请输入正确的agent_id!" }
                ]
              })(
                <Input.Password
                  maxLength={50}
                  style={{ width: 466 }}
                  placeholder={getChannelPlaceholder(
                    chanleType,
                    "agent_id",
                    "请输入agent_id"
                  )}
                />
              )}
            </Form.Item>
          )}

          {chanleType === CHANNEL_VALUE.DING_QUN_TALK && (
            <Form.Item label=" 钉钉群：">
              {getFieldDecorator("chatId", {
                rules: [
                  {
                    message: "请选择钉钉群"
                  },
                  {
                    required: true,
                    message: "请选择钉钉群"
                  }
                  // { pattern: /^\d{0,15}$/, message: "请输入正确的agent_id!" },
                ]
              })(
                <Select placeholder="请选择钉钉群" style={{ width: 466 }}>
                  {dingdingQunList.map((item, index) => (
                    <Select.Option key={index} value={`${item.chatId}`}>
                      {item.name}
                    </Select.Option>
                  ))}
                </Select>
              )}
            </Form.Item>
          )}
        </Form>
      </Card>
    );
  }
}

export default WeChat;
